<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width: 600px;">
    <el-form :model="addClockInForm" ref="addClockInForm" :rules="addClockInrules">
      <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherNumber">
        <el-select v-model="addClockInForm.teacherNumber" placeholder="请选择人员" filterable @change="changeTeacher"
          class="el-my-select" ref="teacherNumber">
          <el-option :label="item.name" :value="item.teacherNumber" v-for="item in teacherList"
            :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="打卡方式" :label-width="formLabelWidth" prop="code">
        <el-select v-model="addClockInForm.code" placeholder="请选择打卡方式" class="el-my-select" ref="code" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in codeData" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="打卡时间" :label-width="formLabelWidth" prop="signTime">
        <el-config-provider :locale="locale">
          <el-date-picker v-model="addClockInForm.signTime" type="datetime" placeholder="请选择打卡时间" style="width: 100%;"
            @change="changeTime" @focus="focusTime" />
        </el-config-provider>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";
import { ElMessage, ElForm } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "80px",
      title: "",
      personnelType: "",
      baseRoleList: [],
      teacherList: [],
      user: {},
      codeData: [
        {
          label: "校本部进门",
          value: 11,
        },
        {
          label: "校本部出门",
          value: 31,
        },
        {
          label: "东校区进门",
          value: 21,
        },
        {
          label: "东校区出门",
          value: 41,
        },
      ],
      addClockInForm: {
        teacherName: "",
        teacherNumber: "",
        code: "",
        realCampus: "",
        signTime: "",
      },
      // 校验规则
      addClockInrules: {
        teacherNumber: vxRule(true, null, "blur"),
        code: vxRule(true, null, "blur"),
        signTime: vxRule(true, null, "blur"),
      },
    };
  },
  setup() {
    return {
      locale: zhCn,
    }
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getBaseTeacherList() {
      httpService(
        "/javaApi/baseTeacher/list/1/10000", {}, "get"
      ).then((data) => {
        this.teacherList = data.list;
      });
    },
    changeTeacher(value) {
      console.log(value, this.addClockInForm.teacherNumber);
      if (this.teacherList) {
        const arr = this.teacherList.filter(item => item.teacherNumber == value)
        if (arr) {
          this.addClockInForm.teacherName = arr[0].name
        }
      }
    },
    clear() {
      this.dialogFormVisible = false;

      this.addClockInForm.teacherName = ""
      this.addClockInForm.teacherNumber = ""
      this.addClockInForm.code = ""
      this.addClockInForm.realCampus = ""
      this.addClockInForm.signTime = ""
    },
    // serachTeacher(value) {
    //   let teacher = ''
    //   value == undefined ? teacher = '' : teacher = value
    //   httpService("/javaApi/baseTeacher/list/1/10000", { "name": teacher }, "get").then(
    //     (data) => {
    //       this.teacherList = data.list
    //     }
    //   );
    // },

    focusTime() {
      this.addClockInForm.signTime = formatTime1(new Date())
    },

    changeTime(value) {
      console.log(value);
      const date = new Date(value);

      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1  
      const day = ('0' + date.getDate()).slice(-2);
      const hours = date.getHours(); // 这已经是本地时间了，所以不需要进行时区转换  
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);

      // 拼接成目标格式的字符串  
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.addClockInForm.signTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      console.log(formattedDate);
    },
    save() {
      console.log(this.addClockInForm.teacherName, this.addClockInForm.teacherNumber, this.addClockInForm.code);
      this.$refs.addClockInForm.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("teacherName", this.addClockInForm.teacherName);
          params.append("teacherNumber", this.addClockInForm.teacherNumber);
          // params.append("teacher_name", this.addClockInForm.teacherName);
          // params.append("teacher_number", this.addClockInForm.teacherNumber);
          params.append("code", this.addClockInForm.code);
          params.append("realCampus", this.user.campus);
          params.append("signTime", this.addClockInForm.signTime);

          // if (this.addClockInForm.id) {
          //   params.append("id", this.addClockInForm.id);
          //   httpService("/javaApi/baseTeacher/edit", params, "post").then(
          //     (data) => {
          //       if (data.code == 200) {
          //         ElMessage.success("修改成功");
          //         this.clear();
          //         //刷新父组件的数据
          //         this.$parent.getBaseTeacherListApp();
          //       } else {
          //         ElMessage.error("修改失败");
          //       }
          //     }
          //   );
          // } else {
          httpService("/javaApi/temperatureReporting/add", params, "post").then(
            (data) => {
              if (data.code == 200) {
                ElMessage.success("添加成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getTemperatureReportingList();
              } else {
                ElMessage.error("添加失败");
              }
            }
          );
          // }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {

  margin-right: 0;
  border-bottom: 1px solid #dedede;
  margin-bottom: 20px;
}
</style>